.user_wrap{
    position: fixed;
    width:100%;
    height:100%;
    background-color: #fff;
}
.user_header{
    width:100%;
    height:15rem;
    background:url('../images/bg.png') no-repeat;
    background-size:100%;
    overflow: hidden;
}
.info_pannel{
    width:85%;
    height:8.5rem;
    background-color: #fff;
    margin:5rem auto 0;
    box-shadow: 0px 0px 10px 3px #ddd;
    position: relative;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.info_pannel img{
    width:70px;
    height:70px;
    position:absolute;
    left:50%;
    margin-left:-35px;
    top:-35px;
    border-radius:40px;
    overflow: hidden;
    background:#f5f5f5;
    border:5px solid #f5f5f5;
    box-shadow: 0px 2px 2px #bdbdbd;
}
.role{
    margin-top:70px;
    font-size:14px;
    color:#333;
}
.gologin{
    font-size: 13px;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    background-color: #21b97a;
    color:#fff;
    border-radius:4px;
    margin-top:20px;
}

.opt_list{
    display:flex;
    flex-wrap: wrap;
}
.opt_list li{
    width:30%;
    flex-grow:1;
    display:flex;
    flex-direction: column;
    align-items:center;
    margin-bottom:15px;
}

.opt_list li i{
    font-size: 20px;
    margin-bottom: 15px;
    color:#333;
}

.opt_list li span{
    font-size:14px;
    color:#333;
    margin-bottom:10px;
}

.join{
    width:92%;
    margin:20px auto 0;
}

.join img{
    width:100%;
}